<template>
  <div id="EcportRecord" v-loading="loading">
    <el-dialog
      class="sideDialog"
      title="导出记录"
      :visible.sync="EcportRecordDialog"
      :before-close="handleClose"
    >
      <el-container>
        <el-main>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-date-picker
                v-model="date"
                style="height:36px"
                type="daterange"
                range-separator="——"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-col>
            <el-col :span="6">
              <el-input v-model="derivedName" placeholder="请输入导出人员名字"></el-input>
            </el-col>
            <el-col :span="6">
              <el-button @click="pageChange(1)" type="primary">搜 索</el-button>
              <el-button @click="reset()">重 置</el-button>
            </el-col>
          </el-row>
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="derivedType" label="导出类型" width="200"></el-table-column>
            <el-table-column prop="createDate" label="导出时间"></el-table-column>
            <el-table-column prop="derivedName" label="导出人员"></el-table-column>
            <el-table-column label="导出事项列表">
              <template slot-scope="scope">
                <el-button @click="showDetailDialog(scope.row)" type="text" size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <div class="paginationBox">
          <el-pagination
            background
            layout="total, prev, pager, next, sizes"
            @current-change="pageChange"
            @size-change="sizeChange"
            :current-page="current"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="size"
            :total="total"
          ></el-pagination>
        </div>
        <el-footer class="bottom-buttons">
          <el-button type="primary" @click="handleClose">确 认</el-button>
        </el-footer>
      </el-container>
      <!-- 内层详情 -->
      <el-dialog
        class="recordDetailDialog"
        width="60%"
        title="记录详情"
        :visible.sync="detailDialog"
        append-to-body
      >
        <el-table class="logDetail" border :data="detailData" height="400">
          <el-table-column type="index" label="序号" width="60"></el-table-column>
          <el-table-column prop="itemCodeProd" label="事项编码"></el-table-column>
          <el-table-column prop="itemName" label="事项名称"></el-table-column>
          <el-table-column prop="areaName" label="所属地区"></el-table-column>
          <el-table-column prop="itemDeptName" label="所属部门"></el-table-column>
          <el-table-column prop="itemNature" label="事项性质"></el-table-column>
        </el-table>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name:'EcportRecord',
  data(){
    return{
      EcportRecordDialog:false,
      detailDialog:false,
      loading:false,
      current:1,
      size:10,
      total:0,
      date:[],
      derivedName:'',
      tableData:[],
      detailData:[],
      detail:{
        current:1,
        size:10,
      }

    }
  },
  watch:{

  },
  methods:{
    initData(){
      let params = {
        startTime:this.date[0],
        endTime:this.date[1],
        derivedName:this.derivedName,
        current:this.current,
        size:this.size
      }
      this.loading = true
      this.$get(this.$Api.exportLogList, params)
        .then(res => {
          if(res.data.statusCode === 200){
            this.tableData = res.data.data.records
            this.current = res.data.data.current
            this.size = res.data.data.size
            this.total = res.data.data.total
          }
          this.loading = false
        })
        .catch(err => {
          console.log(err);
          this.loading = false
        });
    },
    handleClose(){
      this.EcportRecordDialog = false
    },
    showListDialog(){
      this.EcportRecordDialog = true
      this.initData()
    },
    // 获取事项详情
    showDetailDialog(row){
      this.detailDialog = true
      let params = {
        id:row.id,
        current:this.detail.current,
        size:this.detail.size
      }
      this.$get(this.$Api.exportLogDetail, params)
        .then(res => {
          if(res.data.statusCode === 200){
            this.detailData = res.data.data.records
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    pageChange(val){
      this.current = val
      this.initData()
    },
    sizeChange(val){
      this.size = val
      this.initData()
    },
    reset(){
      this.date = []
      this.derivedName = ''
    }
  }
}
</script>

<style lang="scss">
#EcportRecord {
  .el-main {
    height: 70vh;
    overflow-y: auto;
  }
  .el-dialog {
    width: 1140px;
    .el-row {
      margin-bottom: 20px;
      .el-col-4 {
        overflow: hidden;
        text-align: left;
      }
    }
  }
  .logButton {
    width: 100%;
    height: 80px;
    border-top: 1px solid #c9c9c9;
    text-align: center;
    padding-top: 20px;
    margin-top: 20px;
  }
}
</style>